<script setup>
  import '@wangeditor/editor/dist/css/style.css' // 引入 css

  import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

//声明属性
const props = defineProps({
    modelValue: {
        default: "",
    }
  })
  //声明事件信息
  const emit = defineEmits(['update:modelValue'])

  // 编辑器实例，必须用 shallowRef
  const editorRef = shallowRef()
  
  // 内容 HTML
  const valueHtml = ref('<p>hellqqqqq</p>')
  //属性变化时自动赋值给valueHtml
  watchEffect(() => {
    valueHtml.value = props.modelValue
  })
  
  // 当valueHtml变化时，自动告诉父组件
  watch(valueHtml, (newHtml) => {
    emit('update:modelValue', newHtml)
  })
  
  // 模拟 ajax 异步获取内容
 // onMounted(() => {
   // setTimeout(() => {
   //   valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
   // }, 1500)
 // })
  
  const toolbarConfig = {}
  const editorConfig = {
   placeholder: '请输入内容...',
   //插入图片
   MENU_CONF:{
    uploadImage:{
      server:"/boss/course/upload",
      fieldName:"file",
      customInsert(res,insertFn){
        if(res.code === '000000'){
        insertFn(res.data.name)
      }
      else{
        ElMessage.error('富文本编辑器上传图片失败……')
        throw new Error('富文本编辑器上传图片失败……')
      }
      }
    }
   } 
   }
  
  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
  })
  
  const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
  }
  
  const mode = 'default' // 或 'simple'
</script>

<template>
 <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
</template>

<style scoped>

</style>
